<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>动态节点树</title>
    <i th:replace="~{common :: baseUrl}"></i>
<link rel="stylesheet" type="text/css" th:href="@{/tree/css/easyui.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/tree/css/icon.css}" /><link rel="stylesheet" th:href="@{/layui/css/layui.css}"  media="all">
<script type="text/javascript" th:src="@{/tree/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/tree/js/jquery.easyui.min.js}"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!--    头部-->
    <i th:replace="~{backend/app/common :: head}"></i>
    <!--左侧-->
    <i th:replace="~{backend/app/common :: left}"></i>
<div class="layui-body">
<br />


    <div style="padding-left: 10px;">
        <ul id="category" class="easyui-tree">
        </ul>
    </div>

<div id="categoryMenu" class="easyui-menu" style="width:120px;" data-options="onClick:menuHandler">
    <div data-options="iconCls:'icon-add',name:'add'">添加</div>
    <div data-options="iconCls:'icon-remove',name:'rename'">重命名</div>
    <div class="menu-sep"></div>
    <div data-options="iconCls:'icon-remove',name:'delete'">删除</div>
</div>
<script type="text/javascript">
$(function(){
	$("#category").tree({
        //查询各级分类的内容  通过传入当前选中的分类id
		url : baseUrl+'backend/app/appCategory',
		method : "GET",
        //动画渲染
		animate: true,
        //弹出菜单
		onContextMenu: function(e,node){
		    //鼠标右键失效
            e.preventDefault();
            //当点击右键时展示指定内容
            $(this).tree('select',node.target);
            $('#categoryMenu').menu('show',{
                left: e.pageX,
                top: e.pageY
            });
        },
        // 在修改节点信息之后触发,传递过来的被修改的节点对象信息.
        onAfterEdit : function(node){
        	var _tree = $(this);
        	if(node.id == 0){
        		// 新增节点
        		$.post(
        		    baseUrl+"backend/app/appCategory-add",
                    {
                        parentId : node.parentId,
                        categoryName : node.text
                    },
                    function(result){
        		        if (result.code==0){
        		            //添加成功后 修改新增节点的id属性
                            _tree.tree("update",{
                                target : node.target,
                                id : result.data
                            });
                        }else {
                            $.messager.alert('提示',result.msg);
                        }

        		    });
        	}else{
        	    //修改App分类名称
        		$.ajax({
        			   type: "POST",
        			   url: baseUrl+"backend/app/appCategory-rename",
        			   data:
                           {
                               id : node.id,
                               categoryName : node.text
                           },
        			   success: function(result){
        			       if (result.code==0){
                               $.messager.alert('提示','修改App分类名称成功!');
                           }else {
                               $.messager.alert('提示', result.msg);
                           }
        			   },
        			   error: function(){
        				   $.messager.alert('提示','重命名失败!');
        			   }
        			});
        	}
        }
	});
});
// 菜单的具体的功能
function menuHandler(item){
    // 选中整个树结构.
    var tree = $("#category");
    // 获取当前被选中的节点.
	var node = tree.tree("getSelected");
    // 如果点击的是菜单用的添加
	if(item.name === "add"){
        // 要给整个树结构追加一个新的节点.
		tree.tree('append', {
            // 指定新节点的父节点是谁
            parent: (node?node.target:null),
            // 新节点的默认信息.
            data: [{
                text: '新建分类',
                id : 0,
                parentId : node.id
            }]
        });
        // 找到当前数结构中id为0的节点. (选中新节点.)
		var _node = tree.tree('find',0);
        // 选中新节点,并且直接进入编辑状态
		tree.tree("select",_node.target).tree('beginEdit',_node.target);
	}else if(item.name === "rename"){

		tree.tree('beginEdit',node.target);

	}else if(item.name === "delete"){
		$.messager.confirm('确认','确定删除名为 '+node.text+' 的分类吗？',function(r){
			if(r){
				$.ajax({
                    type: "POST",
                    url: baseUrl+"backend/app/appCategory-delete",
                    data :
                        {
                            parentId : node.parentId,
                            id : node.id
                        },
                    success: function(result){
                        if (result.code==0) {
                            $.messager.alert('提示', '删除成功!');
                            tree.tree("remove", node.target);
                        }else {
                            $.messager.alert('提示',result.msg);
                        }
                    },
                    error: function(){
                        $.messager.alert('提示','删除失败!');
                    }
                });
			}
		});
	}
}
</script>
</div>
</div>
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script>
    //JavaScript代码区域
    layui.use(['element'], function(){
        var element = layui.element;
        // layui其他功能
    });
</script>
</body>
</html>